Widgets and tracking parameter for cross domain tracking

E-commerce tracking solutions, such as Google Analytics, use URL parameters to track customers across different domains. In the case of Google Analytics, a click handler is added to all anchor elements on the page, dynamically injecting the tracking parameter into the target URL when a user clicks on it.

However, this method is incompatible with how the BOOKING ENGINE widget renders and handles links. To ensure Google Analytics 4 works across multiple domains (e.g., from your hotel website to your booking engine), you'll need to enable a specific Google Analytics plugin.

Google Analytics 4 Cross Domain Tracking

To enable GA4 for BOOKING ENGINE Widgets, you need to add this to your BOOKING ENGINE widgets settings call:

__KBE.settings({
"id": "BOOKINGWIDGET", // may be different
"propertyCode": "<YOUR-HOTEL-ID>",
"urlTransformers": [
{
id: 'ga4',
measurementId: '<MEASUREMENT-ID>',
googleAdsId: '<GOOGLEADS-ID>',
},
],
});

The GA4-URL-Transformer consists of three attributes:

Attribute	Description
id	Mandatory Defines which pre-defined URL transformer should be used. Use 'ga4'
measurementId	Mandatory Your GA4 measurement ID.
googleAdsId	Optional Defines wether or not the gclidparameter should be added to the target URL. Needs to contain your Google Ads ID. (default is false )

This requires the BOOKING ENGINE part to be setup accordingly. If you are unsure if you already configured your GTM tag correctly, check the section Cross Domain Tracking within the BOOKING ENGINE in the BOOKING ENGINE Analytics 4 Integration documentation page.

Attention: Under the hood, the gtag get functionality is used if the parameter isn't in the URL of the hosting page. You need to make sure that gtagis properly initialized and provides the necessary data. Please see the google documentation on gtag on how to set it up correctly.

Custom URL Transformers

While the BOOKING ENGINE widgets only come with a predefined handler for Google Analytics, we provide an option to provide your own transformers.

You may provide a custom Javascript function to the urlTransformers setting attribute. The function receives the URL it should transform as string and has to either return a string or a Javascript Promise resolving to a string.

Simple string to string transform example

In this example, the url transformer function checks the current page URL for a parameter called my-tracking-id. If it finds the parameter, it'll add it to the received URL.

function addMyTrackingId(url) {
// get my-tracking-id from the parameters
const myTrackingId = new URLSearchParams(window.location.search).get('my-tracking-id');
const targetUrl = new URL(url);
if (myTrackingId) {
// if there's a value, we set it to the target URL
targetUrl.searchParams.set('my-tracking-id', myTrackingId);
}
return targetUrl.toString();
}

Asynchronous string transform example

Assume you use an Javascript based library as your tracking solution which returns its values asynchronously through a callback. Such cases requires the usage of a Javascript Promise like so:

function addMyTrackingIdAsync(url) {
return new Promise((resolve) => {
myCustomTrackingLib.getTrackingId((trackingId, err) => {
if (err) {
resolve(url); // in error case you need to return the original URL
return;
}
const targetUrl = new URL(url);
targetUrl.searchParams.set('my-tracking-id', trackingId);
resolve(targetUrl.toString());
});
});
}

Make sure to provide add error handling to make sure the promise resolves. If it does not resolve, the widget will wait indefinitly and will not navigate the user to the target page!